{% extends "base.html" %}

{% block title %}关于我们 - SurveyAnalyzer{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.index') }}">
                <i class="fas fa-home me-1"></i>
                首页
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-info-circle me-1"></i>
            关于我们
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <!-- 产品介绍 -->
        <div class="card mb-4">
            <div class="card-body text-center">
                <div class="mb-4">
                    <i class="fas fa-chart-line fa-4x text-primary mb-3"></i>
                    <h2 class="card-title">SurveyAnalyzer</h2>
                    <p class="lead text-muted">专业的问卷调查数据分析平台</p>
                </div>
                
                <p class="card-text">
                    SurveyAnalyzer 是一个功能强大、易于使用的问卷调查数据分析工具。
                    我们致力于为研究人员、数据分析师和企业用户提供专业的数据分析解决方案，
                    帮助您从调查数据中发现有价值的洞察。
                </p>
            </div>
        </div>
        
        <!-- 核心功能 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-star me-2"></i>
                    核心功能
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-upload fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>数据导入</h6>
                                <p class="text-muted mb-0">支持多种格式的数据文件导入，包括CSV、Excel、JSON等</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-broom fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>数据清洗</h6>
                                <p class="text-muted mb-0">自动检测和处理缺失值、重复数据和异常值</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-chart-bar fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>统计分析</h6>
                                <p class="text-muted mb-0">描述性统计、相关性分析、假设检验等</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-eye fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>数据可视化</h6>
                                <p class="text-muted mb-0">丰富的图表类型，交互式可视化展示</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-project-diagram fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>聚类分析</h6>
                                <p class="text-muted mb-0">K-Means聚类算法，发现数据中的隐藏模式</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-robot fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>AI智能分析</h6>
                                <p class="text-muted mb-0">文本情感分析、智能洞察发现、趋势预测</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-cogs fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>高级分析</h6>
                                <p class="text-muted mb-0">主成分分析、因子分析、回归分析等高级统计方法</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-file-alt fa-2x text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6>报告生成</h6>
                                <p class="text-muted mb-0">自动生成专业的分析报告，支持多种导出格式</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 技术特色 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-code me-2"></i>
                    技术特色
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center mb-3">
                        <i class="fab fa-python fa-3x text-primary mb-2"></i>
                        <h6>Python生态</h6>
                        <p class="text-muted small">基于Python构建，集成pandas、scikit-learn、plotly等优秀库</p>
                    </div>
                    
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-tachometer-alt fa-3x text-primary mb-2"></i>
                        <h6>高性能</h6>
                        <p class="text-muted small">优化的算法实现，支持大规模数据集的快速处理</p>
                    </div>
                    
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-mobile-alt fa-3x text-primary mb-2"></i>
                        <h6>响应式设计</h6>
                        <p class="text-muted small">适配各种设备，随时随地进行数据分析</p>
                    </div>
                    
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-shield-alt fa-3x text-primary mb-2"></i>
                        <h6>数据安全</h6>
                        <p class="text-muted small">本地处理，保护您的数据隐私和安全</p>
                    </div>
                    
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-puzzle-piece fa-3x text-primary mb-2"></i>
                        <h6>模块化架构</h6>
                        <p class="text-muted small">清晰的模块划分，易于扩展和维护</p>
                    </div>
                    
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-cloud fa-3x text-primary mb-2"></i>
                        <h6>云端部署</h6>
                        <p class="text-muted small">支持云端部署，团队协作更便捷</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 版本信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    版本信息
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>当前版本：</strong></td>
                                <td><span class="badge bg-primary">v2.0.0</span></td>
                            </tr>
                            <tr>
                                <td><strong>发布日期：</strong></td>
                                <td>2024年1月</td>
                            </tr>
                            <tr>
                                <td><strong>开发语言：</strong></td>
                                <td>Python 3.8+</td>
                            </tr>
                            <tr>
                                <td><strong>Web框架：</strong></td>
                                <td>Flask</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>数据处理：</strong></td>
                                <td>pandas, numpy</td>
                            </tr>
                            <tr>
                                <td><strong>机器学习：</strong></td>
                                <td>scikit-learn</td>
                            </tr>
                            <tr>
                                <td><strong>可视化：</strong></td>
                                <td>plotly, matplotlib</td>
                            </tr>
                            <tr>
                                <td><strong>前端框架：</strong></td>
                                <td>Bootstrap 5</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 更新日志 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-history me-2"></i>
                    更新日志
                </h5>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">v2.0.0 <small class="text-muted">2024-01</small></h6>
                            <ul class="mb-0">
                                <li>全新的用户界面设计</li>
                                <li>增加AI智能分析功能</li>
                                <li>优化数据处理性能</li>
                                <li>新增高级统计分析方法</li>
                                <li>改进报告生成功能</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">v1.5.0 <small class="text-muted">2023-10</small></h6>
                            <ul class="mb-0">
                                <li>增加聚类分析功能</li>
                                <li>支持更多数据格式</li>
                                <li>优化可视化图表</li>
                                <li>修复已知问题</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">v1.0.0 <small class="text-muted">2023-06</small></h6>
                            <ul class="mb-0">
                                <li>首个正式版本发布</li>
                                <li>基础数据分析功能</li>
                                <li>数据可视化支持</li>
                                <li>Web界面实现</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 联系方式 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-envelope me-2"></i>
                    联系我们
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-envelope fa-lg text-primary me-3"></i>
                            <div>
                                <strong>邮箱支持</strong><br>
                                <a href="mailto:support@surveyanalyzer.com">support@surveyanalyzer.com</a>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center mb-3">
                            <i class="fab fa-github fa-lg text-primary me-3"></i>
                            <div>
                                <strong>开源项目</strong><br>
                                <a href="https://github.com/surveyanalyzer" target="_blank">GitHub Repository</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-book fa-lg text-primary me-3"></i>
                            <div>
                                <strong>使用文档</strong><br>
                                <a href="/help" target="_blank">在线帮助文档</a>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center mb-3">
                            <i class="fas fa-comments fa-lg text-primary me-3"></i>
                            <div>
                                <strong>社区讨论</strong><br>
                                <a href="#" target="_blank">用户社区论坛</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 致谢 -->
        <div class="card">
            <div class="card-body text-center">
                <h6 class="card-title">
                    <i class="fas fa-heart text-danger me-2"></i>
                    特别致谢
                </h6>
                <p class="card-text text-muted">
                    感谢所有开源项目的贡献者，特别是 pandas、scikit-learn、plotly、Flask 等项目团队。
                    正是有了这些优秀的开源工具，才让 SurveyAnalyzer 得以快速发展。
                </p>
                <small class="text-muted">
                    © 2024 SurveyAnalyzer. 保留所有权利。
                </small>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-marker {
    position: absolute;
    left: -2.25rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border-left: 3px solid #007bff;
}

.timeline-title {
    margin-bottom: 0.5rem;
    color: #495057;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease-in-out;
}
</style>
{% endblock %}